<template>
	<view class="">
		<view class="custom-navbar" :style="{'height':capsuleTop}">
			<view class="custom-navbar-title">
				加盟商家
			</view>
		</view>
		<u-picker v-model="show" mode="selector" @confirm="pickerConfirm" :default-selector="[0]"
			:range="cityList"></u-picker>
		<view class="content" :style="{'margin-top':capsuleTop}">
			<view class="content-top" @click="show = true">
				<image class="content-top-img" :src="icon" alt=""></image>
				<text class="content-top-text">{{citys}}</text>
				<image class="content-top-imgs" :src="icon1" alt=""></image>
			</view>
			<!-- <view class="content-top1">
				<view class="content-top1-list" v-for="item in 8">
					<view class="">
						乐园餐厅
					</view>
					<view class="content-top1-img">
						<image class="content-top1-imgs" :src="icon2" alt=""></image>
					</view>
				</view>
			</view> -->
			<view class="list">
				<view class="list-left" style="margin:40rpx 2% 0;" v-for="(item,index) in list" :key="index">
					<view class="list-left-imgs">
						<image class="list-left-img"  :style="{'height':item.image ? '383rpx' : '310rpx','marginTop':item.image ? '0' : '36rpx'}"  :src="item.image ?  item.image : bg1" alt=""></image>
					</view>
					<view class="list-left-title">
						{{item.name}}
					</view>
					<view class="list-left-title1">
						电话：{{item.phone ? item.phone : ''}}
					</view>
					<view class="list-left-title1">
						{{item.address}}
					</view>
					<view class="line">

					</view>
					<view class="line-footer">
						<!-- <view class="line-y">

						</view> -->
						<!-- <view class="line-footer-left" @click="dwFn(item)">
							<image class="line-footer-imgs" :src="icon4" alt=""></image>
							<text class="line-footer-text">定位</text>
						</view> -->
						<view class="line-footer-left" @click="btn">
							<image class="line-footer-imgs" :src="icon5" alt=""></image>
							<text class="line-footer-text" style="color:#34C8E8">邀请好友</text>
						</view>
					</view>
				</view>

			</view>


		</view>
	</view>
	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				capsuleTop: uni.getMenuButtonBoundingClientRect().top + 35.5 + 'px',
				icon: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/member/member5.png',
				icon1: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/member/member3.png',
				icon2: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/member/member4.png',
				icon3: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/member/member7.png',
				icon4: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/member/member2.png',
				icon5: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/member/member1.png',
				bg1: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/member/bg1.png',
				cityList: [],
				list: [],
				citys: '',
				city: [],
				searchList: [],
			}
		},
		onShow() {
			this.getIndex();
		},
		methods: {
			pickerConfirm(e) {
				this.citys = this.city[e].city;
				let lists = [];
				if (this.citys == '全部') {
					this.searchList.forEach((item, i) => {
						lists.push(item)
					})
				} else {
					this.searchList.forEach((item, i) => {
						if (item.city == this.citys) {
							lists.push(item)
						}
					})
				}
				this.list = lists;


			},
			dwFn(item) {
				uni.navigateTo({
					url: '/pages/sort/map?latitude=' + item.latitude + '&longitude=' + item.longitude + '&name=' +
						item.name + '&adress=' + item.adress
				});
			},
			btn() {
				uni.navigateTo({
					url: '/pages/sort/sort-people'
				});
			},
			btns() {
				uni.showToast({
					title: "正在开发中，敬请期待！",
					icon: 'none',
					mask: true,
				});
			},
			async getIndex() {
				try {
					let data = await new this.Request(this.Urls.m().business).modepost();
					this.searchList = data.data.list;
					this.cityList = [];
					let city = [];
					city = data.data.cityList;
					city.unshift({
						city: '全部'
					})

					this.citys = city[0].city;
					let lists = [];
					if (this.citys == '全部') {
						this.searchList.forEach((item, i) => {
							lists.push(item)
						})
					} else {
						this.searchList.forEach((item, i) => {
							if (item.city == this.citys) {
								lists.push(item)
							}
						})
					}


					this.list = lists;
					city.forEach(item => {
						this.cityList.push(item.city);
					})
					this.city = city;
				} catch (e) {
					console.log(e, 'e')

				}

			},
		},

	}
</script>

<style scoped>
	.custom-navbar {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		text-align: center;
		font-size: 44rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 500;
		color: #333333;
		/* 导航栏高度 */
		background-image: linear-gradient(to right, #caecf8 0%, #fff 100%);
		/* 渐变色 */
		/* 其他样式 */
	}

	.custom-navbar-title {
		width: 100%;
		position: absolute;
		bottom: 10rpx;
		text-align: center;
	}

	.content {
		min-height: 100vh;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 27rpx 0;
		width: 750rpx;
		background: #F3F4F9;
	}

	.content-top {
		margin: 20rpx 0 0 30rpx;
	}

	.content-top-img {
		width: 25rpx;
		height: 31rpx;
		vertical-align: middle;
	}

	.content-top-text {
		margin-left: 19rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		vertical-align: middle;
	}

	.content-top-imgs {
		margin-left: 9rpx;
		width: 11rpx;
		height: 9rpx;
		vertical-align: middle;
	}

	.content-top {
		margin-top: 47rpx;
	}

	.content-top1 {
		margin-top: 30rpx;
		white-space: nowrap;
		width: 100%;
		overflow-x: scroll;
	}

	.content-top1-list {
		margin-left: 37rpx;
		display: inline-block;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.content-top1-img {
		width: 100%;
	}

	.content-top1-imgs {
		margin: 35rpx auto 0;
		display: block;
		width: 55rpx;
		height: 20rpx;
	}

	.list {
		margin-top: 30rpx;
	}

	.list-left {
		vertical-align: top;
		margin-top: 20rpx;
		display: inline-block;
		overflow: hidden;
		width: 45%;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.list-left-imgs {
		width: 310rpx;
		height: 383rpx;
		overflow: hidden;
		background-color: aliceblue;
	}
	.list-left-img{
		display: block;
		width: 310rpx;
		height: 310rpx;
	}
	.list-left-title {
		margin: 20rpx 0 0 18rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.list-left-title1 {
		margin: 20rpx 0 0 18rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.line {
		margin-top: 22rpx;
		width: 333rpx;
		height: 2rpx;
		border: .5px solid #000000;
		opacity: 0.08;
	}

	.line-footer {
		position: relative;
	}

	.line-y {
		position: absolute;
		top: 0;
		left: 50%;
		width: 2rpx;
		height: 71rpx;
		border: .5px solid #000000;
		opacity: 0.08;
	}

	.line-footer-left {
		text-align: center;
		padding: 20rpx 0;
		display: inline-block;
		width: 100%;
	}

	.line-footer-imgs {
		display: inline-block;
		width: 27rpx;
		height: 27rpx;
		vertical-align: middle;
	}

	.line-footer-text {
		margin-left: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}
</style>